<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';

  require('echarts/theme/macarons'); // echarts theme
  import resize from '@/views/dashboard/mixins/resize';

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '450px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null
    },
    methods: {
      randomColor() {
        let str = "#";
        for (let i = 0; i < 6; i++) {
          str += Math.floor(Math.random() * 9);
        }
        //在控制器中显示出随机生成的颜色(可以删除,无影响)
        //返回随机生成的颜色
        return str;
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        this.setOptions(this.chartData)
      },
      setOptions(chartData) {
        if(chartData.xAxis&&chartData.data&&chartData.legend){
          let {xAxis, data, legend,unit} = chartData;
          let series = [];
          for (let i = 0; i < legend.length; i++) {
            let color = this.randomColor();
            let seriesItem = {
              name: legend[i], itemStyle: {
                normal: {
                  color: color,
                  lineStyle: {
                    color: color,
                    width: 2
                  }
                }
              },
              smooth: true,
              type: 'line',
              data: data[i],
              animationDuration: 2800,
              animationEasing: 'cubicInOut'
            };
            series.push(seriesItem);
          }


          let option = {
            xAxis: {
              data: xAxis,
              boundaryGap: false,
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 60
              }
            },
            grid: {
              left: 30,
              right: 50,
              bottom: 20,
              top: 30,
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              },
              padding: [5, 10],
              formatter: function (params) {
                let relVal = params[0].name;
                for (let i = 0, l = params.length; i < l; i++) {
                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value+unit;
                }
                return relVal;
              }
            },
            yAxis: {
              type:'value',
              minInterval:1,
              axisTick: {
                show: false
              },
              axisLabel:{
                formatter: '{value} '+unit
              }
            },
            legend: {
              data: legend
            },
            toolbox: { //可视化的工具箱
              show: true,
              top:-10,
              right: 50,
              feature: {
                /*dataView: { //数据视图
                  show: true
                },
                restore: { //重置
                  show: true
                },
                dataZoom: { //数据缩放视图
                  show: true
                },*/
                saveAsImage: {//保存图片
                  show: true,
                  name:"maker",
                  title:"保存为图片",
                  pixelRatio:2
                },
                magicType: {//动态类型切换
                  type: ['bar', 'line']
                }
              }
            },
            series: series/*[{
            name: legend[0], itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: data,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
            {
              name: 'actual',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#3888fa',
                  lineStyle: {
                    color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              data: actualData,
              animationDuration: 2800,
              animationEasing: 'quadraticOut'
            }
          ]*/
          };
          this.chart.setOption(option,true);
        }
      }
    }
  }
</script>
